<template>
    <div id="detail">
        <van-tabs v-model="active" scrollspy sticky>
            <!-- 插槽一下 -->
            <span slot="nav-left" @click="$router.go(-1)"
                ><van-icon name="arrow-left"
            /></span>
            <van-tab title="商品" name="0">
                <!-- 通用错误 -->
                <van-empty
                    image="error"
                    v-if="gallery.length == 0"
                    description="暂无商品图片"
                />
                <!-- 详情的轮播图 -->
                <van-swipe :autoplay="3000">
                    <van-swipe-item
                        v-for="(image, index) in gallery"
                        :key="image.id"
                    >
                        <img :src="image.img_url" @click="ImgClick(index)" />
                    </van-swipe-item>
                </van-swipe>
                <Tip />
                <!-- 产品信息 -->
                <div class="product_info">
                    <h3>{{ info.name }}</h3>
                    <div>{{ info.goods_brief }}</div>
                    <p>{{ info.retail_price | RMBformat }}</p>
                </div>
            </van-tab>
            <van-tab title="详情" name="1"
                ><div class="attribute">
                    <!-- 产品参数 -->
                    <h4>商品参数</h4>
                    <ul>
                        <li v-for="(item, index) in attribute" :key="index">
                            <span>{{ item.name }}</span>
                            <section class="van-ellipsis">
                                {{ item.value }}
                            </section>
                        </li>
                    </ul>
                </div>
                <!-- 产品图片 -->
                <div class="goods_desc" v-html="info.goods_desc"></div>
                <!-- 常见问题 -->
                <div class="title">
                    <span>常见问题</span>
                </div>
                <ul class="issue">
                    <li v-for="item in issue" :key="item.id">
                        <h3>{{ item.question }}</h3>
                        <p>{{ item.answer }}</p>
                    </li>
                </ul>
            </van-tab>
            <van-tab title="推荐" name="2" class="recommend">
                <Pruduct :goodsList="goodsList" />
            </van-tab>
            <i slot="nav-right"></i>
        </van-tabs>
        <van-sku
        ref="sku"
            v-model="isSkuShow"
            :sku="sku"
            :goods="goods"
            :hide-stock="sku.hide_stock"
        />
        <AppGoodsAction @addToCart="addToCart" @handlclick="handleclick" :goodsCount='goodsCount'/>
    </div>
</template>

<script>
import AppGoodsAction from "../components/AppGoodsAction";
import Pruduct from "../components/search/Products";
import Tip from "../components/Tip";
import Vue from "vue";
import { Lazyload, ImagePreview } from "vant";
import { GetGoodsDetail, GetGoodsRelated,GetGoodsCount,AddProductToCart} from "../request/api";

Vue.use(Lazyload);

export default {
    data() {
        return {
            active: 0, //三个盒子对应三个值
            images: [], //预览图片的图片保存数组
            gallery: [], // 轮播图图片路径
            info: [], //产品信息
            attribute: [], //产品参数
            issue: [], //常见问题
            goodsList: [], //推荐商品列表
            goodsCount: '',//购物车数量
            productList: [],  //当前商品 产品id，来自productList的第一个数组项中的id
            // sku相关数据：
            isSkuShow: false,
            sku: {
                tree: [],
                hide_stock: false,
                price: "0",
                stock_num: 0,
                price: "1.00", // 默认价格（单位元）
                stock_num: 227, // 商品总库存
            },
            goods: {
                picture: "",
            },
        };
    },
    components: {
        AppGoodsAction,
        Tip,
        Pruduct,
        
    },
    methods: {
        //点击对应图片开始预览
        ImgClick(i) {
            ImagePreview({
                images: this.images,
                closeable: true, //是否展示关闭图标
                startPosition: i, //指定点击位置图片
            });
        },
        //点击展示弹出层,子传父
        addToCart() {
            if (this.isSkuShow) {
                //执行加入购物车的操作
                // console.log(this.$refs.sku.getSkuData().selectedNum);
                let selectedNum = this.$refs.sku.getSkuData().selectedNum
                AddProductToCart({
                    goodsId: this.$route.params.id,
                    productId: this.productList[0].id,
                    number: selectedNum
                }).then(res=>{
                    console.log(res);
                    this.goodsCount = res.data.data.cartTotal.goodsCount
                    this.$toast.success('添加成功')
                })
            }
            this.isSkuShow = !this.isSkuShow;
        },
        handleclick() {
            this.$toast("功能未开放");
        },
    },
    created() {
        //一创建组件就发送请求请求商品详情
        GetGoodsDetail({ id: this.$route.params.id }).then((res) => {
            // console.log(res);
            this.gallery = res.data.data.gallery;
            this.info = res.data.data.info;
            this.attribute = res.data.data.attribute;
            this.issue = res.data.data.issue;
            this.gallery.forEach((e) => {
                this.images.push(e.img_url);
            });
            this.sku.price = this.info.retail_price
            this.stock_num = this.info.goods_number
            this.goods.picture = this.info.list_pic_url
            this.productList = res.data.data.productList
        });
        //获取推荐商品
        GetGoodsRelated({ id: this.$route.params.id }).then((res) => {
            // console.log(res);
            this.goodsList = res.data.data.goodsList;
        });
        //获取购物车数量
        GetGoodsCount().then((res)=>{
            console.log(res);
            this.goodsCount = res.data.data.cartTotal.goodsCount
        })
    },
};
</script>
 
<style lang = "less" scoped>
#detail {
    padding-bottom: 50px;
}
img {
    width: 100%;
}
span {
    .van-icon {
        width: 40px;
        text-align: center;
        line-height: 45px;
        padding: 0 10px;
        font-size: 23px;
    }
}
i {
    width: 50px;
    display: block;
}
/* 商品信息 */
.product_info {
    background: #fff;
    line-height: 40px;
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    h3 {
        font-size: 20px;
    }
    div {
        color: #666;
    }
    p {
        color: darkred;
    }
}
/* 商品参数 */
.attribute {
    margin-top: 0.2rem;
    background: #fff;
    padding: 0.2rem 4%;
    h4 {
        font-weight: normal;
        font-size: 0.16rem;
        margin-bottom: 0.2rem;
    }
    ul {
        li {
            background: #efefef;
            line-height: 0.4rem;
            height: 0.4rem;
            margin-bottom: 0.1rem;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            span {
                width: 30%;
                text-align: right;
            }
            section {
                flex: 1;
                padding-left: 0.2rem;
            }
        }
    }
}
/* 如果样式无法替换，可以试试/deep/ 深度样式写法 */
/deep/.goods_desc {
    img {
        max-width: 100%;
        display: block;
    }
}
/* 常见问题 */
.title {
    width: 100%;
    background: #fff;
    height: 0.5rem;
    position: relative;
    &::before {
        content: "";
        width: 50%;
        height: 2px;
        background: #ccc;
        position: absolute;
        top: 50%;
        margin-top: -1px;
        left: 50%;
        margin-left: -25%;
    }
    span {
        width: 30%;
        position: relative;
        background: #fff;
        display: block;
        text-align: center;
        margin: 0 auto;
        height: 0.5rem;
        line-height: 0.5rem;
    }
}
.issue {
    padding: 0 4%;
    background: #fff;
    li {
        h3 {
            height: 0.3rem;
            line-height: 0.3rem;
            padding-left: 0.2rem;
            position: relative;
            font-size: 0.16rem;
            font-weight: normal;
            &::before {
                content: "";
                width: 4px;
                height: 4px;
                background: darkred;
                display: inline-block;
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -2px;
            }
        }
        p {
            font-size: 0.14rem;
            line-height: 0.3rem;
            padding-left: 0.2rem;
        }
    }
}
</style>